<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/match-item.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<common-header active-path="match-item.html"></common-header>
	<section class="banner" style="background-image: url(./images/about-banner.png);">
	</section>
	<section class="content">
		<section class="tabs">
			<section class="container">
				<a
					v-for="item in tabs"
					:key="item.id"
					href="javascript:;"
					class="tab-item"
					:class="{active: currTab === item.id}"
					@click="changeTab(item)"
				>{{ item.name }}</a>
			</section>
		</section>
		<section class="container">
			<section v-if="data.length > 0">
				<a v-for="item in data" :href="'./game-details.html?id=' + item.id" class="game-item">
					<section class="img" :style="{backgroundImage: 'url(' + item.mainImg + ')'}">
						<section class="status" :class="{finish: item.status !== 3}">{{ statusText[item.status] }}</section>
					</section>
					<section class="details">
						<section class="title">
							{{ item.theme }}
							<section class="tag">{{ item.typeName }}</section>
						</section>
						<section class="text">
							{{ item.introduction | substr}}
						</section>
						<section class="time">
							<img src="./images/icons/time.png" alt="">
							{{ formatTime(item.createTime) }} - {{ formatTime(item.endTime) }}
						</section>

					</section>
				</a>
			</section>
			<Empty v-else text="暂无赛项哦" v-else></Empty>
			<section id="page"></section>
		</section>
	</section>
	<common-footer></common-footer>
</section>
<script src="./lib/swiper/js/swiper.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/match/api/tmatch.js"></script>
<script src="../js/abkj/match/api/matchtype.js"></script>
<script src="../js/abkj/ext/news.js"></script>
<script src="./js/common.js"></script>
<script src="./components/index.js"></script>
<script>
	$(function () {
		var vm = new Vue({
			el: '.wrapper',
			data: {
				statusText: {
					1: '未开始',
					2: '已完结',
					3: '进行中'
				},
				currTab: 1,
				page: 1,
				pageSize: 10,
				total: 0,
				tabs: [],
				data: []
			},
			mounted: function () {
				var vm = this
				MatchTypequeryList({}, function (data) {
					vm.tabs = data
					vm.tabs.unshift({id: '', name: '全部'})
					vm.currTab = vm.tabs[0].id
					vm.getData()
				})
			},
			methods: {
				getData: function () {
					var vm = this
					TmatchPageList({
						page: {current: this.page, size: vm.pageSize},
						cond: {
							eq: {
								type: vm.currTab,
								state: 1,
							},
							order: { //排序条件
								type: "desc",
								attrName: ["create_time"]
							}
						}
					}, function (data) {
						var date = +new Date()
						vm.data = data.records.map(function (item) {
							var startDate = +new Date(item.createTime)
							var endDate = +new Date(item.endTime)
							if (date < startDate) item.status = 1 //未开始
							else if (date > endDate) item.status = 2 //已结束
							else item.status = 3 //进行中
							return item
						})
						vm.total = data.total
						vm.renderPage(vm.laypage)
					}, function (err) {
						console.log(err)
					})
				},
				formatTime: function (time) {
					if (!time) return time
					return time.split('T')[0]
				},
				renderPage: function (laypage) {
					var vm = this
					if (!laypage) {
						layui.use(['laypage'], function () {
							vm.laypage = layui.laypage
							layui.laypage.render({
								elem: 'page',
								count: vm.total,
								curr: vm.page,
								limit: vm.pageSize,
								jump: function (obj, first) {
									if (first) return
									vm.page = obj.curr
									vm.getData()
								}
							})
						})
					} else {
						laypage.render({
							elem: 'page',
							count: vm.total,
							curr: vm.page,
							limit: vm.pageSize,
							jump: function (obj, first) {
								if (first) return
								vm.page = obj.curr
								vm.getData()
							}
						})
					}
				},
				changeTab: function (item) {
					this.currTab = item.id
					this.page = 1
					this.getData()
				}
			}
		})
	})
</script>
</body>
</html>
